<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</head>
<body>
<input type="checkbox" id="info-button"/>
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
<canvas id="myCanvas"></canvas>
<canvas id="myNavCubeCanvas"></canvas>
<div class="slideout-sidebar">
    <img class="info-icon" src="../../assets/images/gltf_logo.png"/>
    <h1>GLTFLoaderPlugin</h1>
    <p>Loading a glTF roadworks scan captured on iPhone 12 Pro with <a href="https://scaniverse.com/">Scaniverse</a></p>
    <h3>Stats</h3>
    <ul>
        <li>
            <div id="time">Loading JavaScript modules...</div>
        </li>
    </ul>
    <h3>Components used</h3>
    <ul>
        <li>
            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
               target="_other">Viewer</a>
        </li>
        <li>
            <a href="../../docs/class/src/plugins/GLTFLoaderPlugin/GLTFLoaderPlugin.js~GLTFLoaderPlugin.html"
               target="_other">GLTFLoaderPlugin</a>
        </li>
    </ul>
    <h3>Resources</h3>
    <ul>
        <li>
            <a href="https://github.com/xeokit/xeokit-sdk/issues/1313"
               target="_other">Model source</a>
        </li>
    </ul>
</div>
</body>
<script type="module">

    import {Viewer, GLTFLoaderPlugin, ReflectionMap, FastNavPlugin, sRGBEncoding} from "../../dist/xeokit-sdk.min.es.js";

    const viewer = new Viewer({
        canvasId: "myCanvas",
        transparent: true,
        colorTextureEnabled: true
    });

    viewer.camera.eye = [-0.5607302486267173, 0.04290712593203087, 4.190729930006354];
    viewer.camera.look = [0.7052946670565493, -0.18264935499372642, -0.14314878939648068];
    viewer.camera.up = [-0.0017317831936537432, 0.9986499061608406, -0.05191691296595461];

    viewer.scene.gammaInput = true;
    viewer.scene.gammaOutput = true;
    viewer.scene.gammaFactor = 2.4;

    const gltfLoader = new GLTFLoaderPlugin(viewer);

    const sceneModel = gltfLoader.load({
        id: "myHousePlan",
        src: "../../assets/models/gltf/GLBSample/public-use-sample-apartment.glb"
    });

</script>
</html>